<!DOCTYPE html>


<html theme="dark" showBanner="true" hasBanner="false" > 
<link href="https://cdn.staticfile.org/font-awesome/6.4.2/css/fontawesome.min.css" rel="stylesheet">
<link href="https://cdn.staticfile.org/font-awesome/6.4.2/css/brands.min.css" rel="stylesheet">
<link href="https://cdn.staticfile.org/font-awesome/6.4.2/css/solid.min.css" rel="stylesheet">
<script src="/hexo-blog/js/color.global.min.js" ></script>
<script src="/hexo-blog/js/load-settings.js" ></script>
<head>
  <meta charset="utf-8">
  
  
  

  
  <title>前端脚手架：从入门到进阶——Create React App源码解析（四） | bressanone</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <link rel="preload" href="/hexo-blog/css/fonts/Roboto-Regular.ttf" as="font" type="font/ttf" crossorigin="anonymous">
  <link rel="preload" href="/hexo-blog/css/fonts/Roboto-Bold.ttf" as="font" type="font/ttf" crossorigin="anonymous">

  <meta name="description" content="这是我参与11月更文挑战的第 15 天，活动详情查看：2021最后一次更文挑战 CRA webpack配置本文编写的时候react-scripts版本时4.0.3，还没有升级到webpack5，不过其仓库中已经有了webpack5相关的配置，因此下面的解析是基于其最新的代码。 create-react-app的webpack配置基本上集中在react-scripts&#x2F;config&amp;#x2">
<meta property="og:type" content="article">
<meta property="og:title" content="前端脚手架：从入门到进阶——Create React App源码解析（四）">
<meta property="og:url" content="http://example.com/2021/11/15/%E5%89%8D%E7%AB%AF%E8%84%9A%E6%89%8B%E6%9E%B6%EF%BC%9A%E4%BB%8E%E5%85%A5%E9%97%A8%E5%88%B0%E8%BF%9B%E9%98%B6%E2%80%94%E2%80%94Create%20React%20App%E6%BA%90%E7%A0%81%E8%A7%A3%E6%9E%90%EF%BC%88%E5%9B%9B%EF%BC%89/index.html">
<meta property="og:site_name" content="bressanone">
<meta property="og:description" content="这是我参与11月更文挑战的第 15 天，活动详情查看：2021最后一次更文挑战 CRA webpack配置本文编写的时候react-scripts版本时4.0.3，还没有升级到webpack5，不过其仓库中已经有了webpack5相关的配置，因此下面的解析是基于其最新的代码。 create-react-app的webpack配置基本上集中在react-scripts&#x2F;config&amp;#x2">
<meta property="og:locale" content="zh_CN">
<meta property="article:published_time" content="2021-11-14T16:00:00.000Z">
<meta property="article:modified_time" content="2024-04-04T15:27:03.301Z">
<meta property="article:author" content="Zachary">
<meta property="article:tag" content="前端">
<meta name="twitter:card" content="summary">
  
  
    <link rel="icon" media="(prefers-color-scheme: light)" href="/hexo-blog/images/favicon-light-32.png" sizes="32x32">
    <link rel="icon" media="(prefers-color-scheme: light)" href="/hexo-blog/images/favicon-light-128.png" sizes="128x128">
    <link rel="icon" media="(prefers-color-scheme: light)" href="/hexo-blog/images/favicon-light-180.png" sizes="180x180">
    <link rel="icon" media="(prefers-color-scheme: light)" href="/hexo-blog/images/favicon-light-192.png" sizes="192x192">
    <link rel="icon" media="(prefers-color-scheme: dark)" href="/hexo-blog/images/favicon-dark-32.png" sizes="32x32">
    <link rel="icon" media="(prefers-color-scheme: dark)" href="/hexo-blog/images/favicon-dark-128.png" sizes="128x128">
    <link rel="icon" media="(prefers-color-scheme: dark)" href="/hexo-blog/images/favicon-dark-180.png" sizes="180x180">
    <link rel="icon" media="(prefers-color-scheme: dark)" href="/hexo-blog/images/favicon-dark-192.png" sizes="192x192">
  
  
<link rel="stylesheet" href="/hexo-blog/css/style.css">

<meta name="generator" content="Hexo 7.1.1"></head>

<body>
  
   
  <div id="main-grid" class="  ">
    <div id="nav" class=""  >
      <navbar id="navbar">
  <nav id="title-nav">
    <a href="/hexo-blog/">
      <div id="vivia-logo">
        <div class="dot"></div>
        <div class="dot"></div>
        <div class="dot"></div>
        <div class="dot"></div>
      </div>
      <div>bressanone </div>
    </a>
  </nav>
  <nav id="main-nav">
    
      <a class="main-nav-link" href="/hexo-blog/">主页</a>
    
      <a class="main-nav-link" href="/hexo-blog/archives">归档</a>
    
      <a class="main-nav-link" href="/hexo-blog/about">关于</a>
    
  </nav>
  <nav id="sub-nav">
    <a id="theme-btn" class="nav-icon">
      <span class="light-mode-icon"><svg xmlns="http://www.w3.org/2000/svg" height="20" viewBox="0 -960 960 960" width="20"><path d="M438.5-829.913v-48q0-17.452 11.963-29.476 11.964-12.024 29.326-12.024 17.363 0 29.537 12.024t12.174 29.476v48q0 17.452-11.963 29.476-11.964 12.024-29.326 12.024-17.363 0-29.537-12.024T438.5-829.913Zm0 747.826v-48q0-17.452 11.963-29.476 11.964-12.024 29.326-12.024 17.363 0 29.537 12.024t12.174 29.476v48q0 17.452-11.963 29.476-11.964 12.024-29.326 12.024-17.363 0-29.537-12.024T438.5-82.087ZM877.913-438.5h-48q-17.452 0-29.476-11.963-12.024-11.964-12.024-29.326 0-17.363 12.024-29.537t29.476-12.174h48q17.452 0 29.476 11.963 12.024 11.964 12.024 29.326 0 17.363-12.024 29.537T877.913-438.5Zm-747.826 0h-48q-17.452 0-29.476-11.963-12.024-11.964-12.024-29.326 0-17.363 12.024-29.537T82.087-521.5h48q17.452 0 29.476 11.963 12.024 11.964 12.024 29.326 0 17.363-12.024 29.537T130.087-438.5Zm660.174-290.87-34.239 32q-12.913 12.674-29.565 12.174-16.653-.5-29.327-13.174-12.674-12.673-12.554-28.826.12-16.152 12.794-28.826l33-35q12.913-12.674 30.454-12.674t30.163 12.847q12.709 12.846 12.328 30.826-.38 17.98-13.054 30.653ZM262.63-203.978l-32 34q-12.913 12.674-30.454 12.674t-30.163-12.847q-12.709-12.846-12.328-30.826.38-17.98 13.054-30.653l33.239-31q12.913-12.674 29.565-12.174 16.653.5 29.327 13.174 12.674 12.673 12.554 28.826-.12 16.152-12.794 28.826Zm466.74 33.239-32-33.239q-12.674-12.913-12.174-29.565.5-16.653 13.174-29.327 12.673-12.674 28.826-13.054 16.152-.38 28.826 12.294l35 33q12.674 12.913 12.674 30.454t-12.847 30.163q-12.846 12.709-30.826 12.328-17.98-.38-30.653-13.054ZM203.978-697.37l-34-33q-12.674-12.913-13.174-29.945-.5-17.033 12.174-29.707t31.326-13.293q18.653-.62 31.326 13.054l32 34.239q11.674 12.913 11.174 29.565-.5 16.653-13.174 29.327-12.673 12.674-28.826 12.554-16.152-.12-28.826-12.794ZM480-240q-100 0-170-70t-70-170q0-100 70-170t170-70q100 0 170 70t70 170q0 100-70 170t-170 70Zm-.247-82q65.703 0 111.475-46.272Q637-414.544 637-480.247t-45.525-111.228Q545.95-637 480.247-637t-111.475 45.525Q323-545.95 323-480.247t45.525 111.975Q414.05-322 479.753-322ZM481-481Z"/></svg></span>
      <span class="dark-mode-icon"><svg xmlns="http://www.w3.org/2000/svg" height="20" viewBox="0 -960 960 960" width="20"><path d="M480.239-116.413q-152.63 0-258.228-105.478Q116.413-327.37 116.413-480q0-130.935 77.739-227.435t206.304-125.043q43.022-9.631 63.87 10.869t3.478 62.805q-8.891 22.043-14.315 44.463-5.424 22.42-5.424 46.689 0 91.694 64.326 155.879 64.325 64.186 156.218 64.186 24.369 0 46.978-4.946 22.609-4.945 44.413-14.076 42.826-17.369 62.967 1.142 20.142 18.511 10.511 61.054Q807.174-280 712.63-198.206q-94.543 81.793-232.391 81.793Zm0-95q79.783 0 143.337-40.217 63.554-40.218 95.793-108.283-15.608 4.044-31.097 5.326-15.49 1.283-31.859.805-123.706-4.066-210.777-90.539-87.071-86.473-91.614-212.092-.24-16.369.923-31.978 1.164-15.609 5.446-30.978-67.826 32.478-108.282 96.152Q211.652-559.543 211.652-480q0 111.929 78.329 190.258 78.329 78.329 190.258 78.329ZM466.13-465.891Z"/></svg></span>
    </a>
    
    <div id="nav-menu-btn" class="nav-icon">
      <svg xmlns="http://www.w3.org/2000/svg" height="20" viewBox="0 -960 960 960" width="20"><path d="M177.37-252.282q-17.453 0-29.477-11.964-12.024-11.963-12.024-29.326t12.024-29.537q12.024-12.174 29.477-12.174h605.26q17.453 0 29.477 11.964 12.024 11.963 12.024 29.326t-12.024 29.537q-12.024 12.174-29.477 12.174H177.37Zm0-186.218q-17.453 0-29.477-11.963-12.024-11.964-12.024-29.326 0-17.363 12.024-29.537T177.37-521.5h605.26q17.453 0 29.477 11.963 12.024 11.964 12.024 29.326 0 17.363-12.024 29.537T782.63-438.5H177.37Zm0-186.217q-17.453 0-29.477-11.964-12.024-11.963-12.024-29.326t12.024-29.537q12.024-12.174 29.477-12.174h605.26q17.453 0 29.477 11.964 12.024 11.963 12.024 29.326t-12.024 29.537q-12.024 12.174-29.477 12.174H177.37Z"/></svg>
    </div>
  </nav>
</navbar>
<div id="nav-dropdown" class="hidden">
  <div id="dropdown-link-list">
    
      <a class="nav-dropdown-link" href="/hexo-blog/">主页</a>
    
      <a class="nav-dropdown-link" href="/hexo-blog/archives">归档</a>
    
      <a class="nav-dropdown-link" href="/hexo-blog/about">关于</a>
    
     
    </div>
</div>
<script>
  let dropdownBtn = document.getElementById("nav-menu-btn");
  let dropdownEle = document.getElementById("nav-dropdown");
  dropdownBtn.onclick = function() {
    dropdownEle.classList.toggle("hidden");
  }
</script>
    </div>
    <div id="sidebar-wrapper">
      <sidebar id="sidebar">
  
    <div class="widget-wrap">
  <div class="info-card">
    <div class="avatar">
      
      <div class="img-dim"></div>
    </div>
    <div class="info">
      <div class="username">Zachary </div>
      <div class="dot"></div>
      <div class="subtitle"> </div>
      <div class="link-list">
        
          <a class="link-btn" target="_blank" rel="noopener" href="https://github.com/zzy1661" title="GitHub"><i class="fa-brands fa-github"></i></a>
         
      </div>  
    </div>
  </div>
</div>

  
  <div class="sticky">
    
      


  <div class="widget-wrap">
    <div class="widget">
      <h3 class="widget-title">分类</h3>
      <div class="category-box">
            <a class="category-link" href="/hexo-blog/categories/%E5%89%8D%E7%AB%AF%E7%AC%94%E8%AE%B0/">
                前端笔记
                <div class="category-count">78</div>
            </a>
        
            <a class="category-link" href="/hexo-blog/categories/%E7%AE%97%E6%B3%95%E6%89%8B%E5%86%8C/">
                算法手册
                <div class="category-count">7</div>
            </a>
        </div>
    </div>
  </div>


    
      
  <div class="widget-wrap">
    <div class="widget">
      <h3 class="widget-title">标签</h3>
      <ul class="widget-tag-list" itemprop="keywords"><li class="widget-tag-list-item"><a class="widget-tag-list-link" href="/hexo-blog/tags/Ant-Design/" rel="tag">Ant Design</a></li><li class="widget-tag-list-item"><a class="widget-tag-list-link" href="/hexo-blog/tags/CSS/" rel="tag">CSS</a></li><li class="widget-tag-list-item"><a class="widget-tag-list-link" href="/hexo-blog/tags/Canvas/" rel="tag">Canvas</a></li><li class="widget-tag-list-item"><a class="widget-tag-list-link" href="/hexo-blog/tags/Docker/" rel="tag">Docker</a></li><li class="widget-tag-list-item"><a class="widget-tag-list-link" href="/hexo-blog/tags/ECMAScript-6/" rel="tag">ECMAScript 6</a></li><li class="widget-tag-list-item"><a class="widget-tag-list-link" href="/hexo-blog/tags/JavaScript/" rel="tag">JavaScript</a></li><li class="widget-tag-list-item"><a class="widget-tag-list-link" href="/hexo-blog/tags/Less/" rel="tag">Less</a></li><li class="widget-tag-list-item"><a class="widget-tag-list-link" href="/hexo-blog/tags/MobX/" rel="tag">MobX</a></li><li class="widget-tag-list-item"><a class="widget-tag-list-link" href="/hexo-blog/tags/MongoDB/" rel="tag">MongoDB</a></li><li class="widget-tag-list-item"><a class="widget-tag-list-link" href="/hexo-blog/tags/NPM/" rel="tag">NPM</a></li><li class="widget-tag-list-item"><a class="widget-tag-list-link" href="/hexo-blog/tags/NestJS/" rel="tag">NestJS</a></li><li class="widget-tag-list-item"><a class="widget-tag-list-link" href="/hexo-blog/tags/Node-js/" rel="tag">Node.js</a></li><li class="widget-tag-list-item"><a class="widget-tag-list-link" href="/hexo-blog/tags/Postman/" rel="tag">Postman</a></li><li class="widget-tag-list-item"><a class="widget-tag-list-link" href="/hexo-blog/tags/React-js/" rel="tag">React.js</a></li><li class="widget-tag-list-item"><a class="widget-tag-list-link" href="/hexo-blog/tags/Redux/" rel="tag">Redux</a></li><li class="widget-tag-list-item"><a class="widget-tag-list-link" href="/hexo-blog/tags/TypeScript/" rel="tag">TypeScript</a></li><li class="widget-tag-list-item"><a class="widget-tag-list-link" href="/hexo-blog/tags/UML/" rel="tag">UML</a></li><li class="widget-tag-list-item"><a class="widget-tag-list-link" href="/hexo-blog/tags/Webpack/" rel="tag">Webpack</a></li><li class="widget-tag-list-item"><a class="widget-tag-list-link" href="/hexo-blog/tags/Yeoman/" rel="tag">Yeoman</a></li><li class="widget-tag-list-item"><a class="widget-tag-list-link" href="/hexo-blog/tags/%E5%89%8D%E7%AB%AF/" rel="tag">前端</a></li><li class="widget-tag-list-item"><a class="widget-tag-list-link" href="/hexo-blog/tags/%E6%9E%B6%E6%9E%84/" rel="tag">架构</a></li><li class="widget-tag-list-item"><a class="widget-tag-list-link" href="/hexo-blog/tags/%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8F/" rel="tag">正则表达式</a></li><li class="widget-tag-list-item"><a class="widget-tag-list-link" href="/hexo-blog/tags/%E6%BA%90%E7%A0%81/" rel="tag">源码</a></li><li class="widget-tag-list-item"><a class="widget-tag-list-link" href="/hexo-blog/tags/%E7%88%AC%E8%99%AB/" rel="tag">爬虫</a></li><li class="widget-tag-list-item"><a class="widget-tag-list-link" href="/hexo-blog/tags/%E7%AE%97%E6%B3%95/" rel="tag">算法</a></li><li class="widget-tag-list-item"><a class="widget-tag-list-link" href="/hexo-blog/tags/%E9%9D%A2%E8%AF%95/" rel="tag">面试</a></li></ul>
    </div>
  </div>


    
  </div>
</sidebar>
    </div>
    <div id="content-body">
       


<article id="post-前端脚手架：从入门到进阶——Create React App源码解析（四）" class="h-entry article article-type-post" itemprop="blogPost" itemscope itemtype="https://schema.org/BlogPosting">
  
    
   
  <div class="article-inner">
    <div class="article-main">
      <header class="article-header">
        
<div class="main-title-bar">
  <div class="main-title-dot"></div>
  
    
      <h1 class="p-name article-title" itemprop="headline name">
        前端脚手架：从入门到进阶——Create React App源码解析（四）
      </h1>
    
  
</div>

        <div class='meta-info-bar'>
          <div class="meta-info">
  <time class="dt-published" datetime="2021-11-14T16:00:00.000Z" itemprop="datePublished">2021-11-15</time>
</div>
          <div class="need-seperator meta-info">
            <div class="meta-cate-flex">
  
  <a class="meta-cate-link" href="/hexo-blog/categories/%E5%89%8D%E7%AB%AF%E7%AC%94%E8%AE%B0/">前端笔记</a>
   
</div>
  
          </div>
          <div class="wordcount need-seperator meta-info">
            13k 词 
          </div>
        </div>
        
  <ul class="article-tag-list" itemprop="keywords"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/hexo-blog/tags/%E5%89%8D%E7%AB%AF/" rel="tag">前端</a></li></ul>

      </header>
      <div class="e-content article-entry" itemprop="articleBody">
        
          <p>这是我参与11月更文挑战的第 15 天，活动详情查看：<a target="_blank" rel="noopener" href="https://juejin.cn/post/7023643374569816095/" title="https://juejin.cn/post/7023643374569816095/">2021最后一次更文挑战</a></p>
<h2 id="CRA-webpack配置"><a href="#CRA-webpack配置" class="headerlink" title="CRA webpack配置"></a>CRA webpack配置</h2><p>本文编写的时候react-scripts版本时4.0.3，还没有升级到webpack5，不过其仓库中已经有了webpack5相关的配置，因此下面的解析是基于其最新的代码。</p>
<p>create-react-app的webpack配置基本上集中在react-scripts&#x2F;config&#x2F;webpack.config.js，development和production的不同环境配置都在这一个文件里进行判断，将它拆开后更好阅读些：</p>
<p>首先是声明一些环境变量，这些变量基本集中在config目录下的paths.js、modules.js、env.js文件中，这里先进行一个预设：项目的入口为<code>D:\cra-demo1\src\index.tsx</code>，后续入口相关的参数将替换为这个值，这样更方便理解</p>
<ul>
<li>最外层：导出的是一个函数</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = <span class="keyword">function</span> (<span class="params">webpackEnv</span>) &#123;</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<p>webpack配置文件，可以导出一个对象，或者多个对象，也可以导出一个函数，或者一个promise，</p>
<p>当导出一个函数时，可以传入两个参数，第一是环境对象environment，第二个是传给webpack的选项</p>
<h3 id="target"><a href="#target" class="headerlink" title="target"></a>target</h3><p>target: webpack中文文档已经过期了，如果项目中有browserslist配置，webpack将会用它 - 确定可用于生成运行时代码的 ES 功能 - 推断环境，可以不再配置output.environment</p>
<figure class="highlight vbnet"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="symbol">target:</span> [<span class="comment">&#x27;browserslist&#x27;],</span></span><br></pre></td></tr></table></figure>

<h3 id="mode"><a href="#mode" class="headerlink" title="mode"></a>mode</h3><p>mode设置为<code>&#39;production&#39;</code>，会将 DefinePlugin 中 process.env.NODE_ENV 的值设置为 production。启用 FlagDependencyUsagePlugin, FlagIncludedChunksPlugin, ModuleConcatenationPlugin, NoEmitOnErrorsPlugin, OccurrenceOrderPlugin, SideEffectsFlagPlugin 和 TerserPlugin。</p>
<figure class="highlight arduino"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">mode: isEnvProduction ? <span class="string">&#x27;production&#x27;</span> : isEnvDevelopment &amp;&amp; <span class="string">&#x27;development&#x27;</span>,,</span><br></pre></td></tr></table></figure>

<h3 id="bail"><a href="#bail" class="headerlink" title="bail"></a>bail</h3><p>bail:在生产环境编译遇到错误直接抛出并终止</p>
<figure class="highlight makefile"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="section">bail: isEnvProduction,</span></span><br></pre></td></tr></table></figure>

<h3 id="devtool"><a href="#devtool" class="headerlink" title="devtool"></a>devtool</h3><p>devtool: 生产环境使用<code>shouldUseSourceMap</code>控制是否需要source map。在实践中，生产环境打包可能需要生成source map方便监控或日志平台进行定位，但也可能不需要，因此这里设置了一个变量，由<code>process.env.GENERATE_SOURCEMAP</code>控制</p>
<figure class="highlight vbnet"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="symbol">devtool:</span> isEnvProduction</span><br><span class="line">    ? shouldUseSourceMap</span><br><span class="line">    ? <span class="comment">&#x27;source-map&#x27;</span></span><br><span class="line">    : <span class="literal">false</span></span><br><span class="line">    : isEnvDevelopment &amp;&amp; <span class="comment">&#x27;cheap-module-source-map&#x27;,</span></span><br></pre></td></tr></table></figure>

<h3 id="entry"><a href="#entry" class="headerlink" title="entry"></a>entry</h3><p>entry：入口文件，比如这里是’D:\cra-demo1\src\index.tsx’</p>
<figure class="highlight makefile"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line"><span class="section">entry: paths.appIndexJs,</span></span><br></pre></td></tr></table></figure>

<h3 id="output"><a href="#output" class="headerlink" title="output"></a>output</h3><p>output:相关字段配置和解释如下</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br></pre></td><td class="code"><pre><span class="line"> <span class="attr">output</span>: &#123;</span><br><span class="line">    <span class="comment">// 输出目录，比如这里是&#x27;D:\\cra-demo1\\build&#x27;.</span></span><br><span class="line">    <span class="attr">path</span>: paths.<span class="property">appBuild</span>,</span><br><span class="line">     <span class="comment">// 开发环境输出代码里增加/* filename */注释</span></span><br><span class="line">    <span class="attr">pathinfo</span>: isEnvDevelopment,</span><br><span class="line">    <span class="comment">// 主bundle</span></span><br><span class="line">    <span class="attr">filename</span>: isEnvProduction</span><br><span class="line">    ? <span class="string">&#x27;static/js/[name].[contenthash:8].js&#x27;</span></span><br><span class="line">    : isEnvDevelopment &amp;&amp; <span class="string">&#x27;static/js/bundle.js&#x27;</span>,</span><br><span class="line">    <span class="comment">// 代码分隔后的chunk 文件</span></span><br><span class="line">    <span class="attr">chunkFilename</span>: isEnvProduction</span><br><span class="line">    ? <span class="string">&#x27;static/js/[name].[contenthash:8].chunk.js&#x27;</span></span><br><span class="line">    : isEnvDevelopment &amp;&amp; <span class="string">&#x27;static/js/[name].chunk.js&#x27;</span>,</span><br><span class="line">    <span class="attr">assetModuleFilename</span>: <span class="string">&#x27;static/media/[name].[hash][ext]&#x27;</span>,</span><br><span class="line">    <span class="comment">// 这里是&#x27;/&#x27;</span></span><br><span class="line">    <span class="attr">publicPath</span>: paths.<span class="property">publicUrlOrPath</span>,</span><br><span class="line">    <span class="comment">// source map路径</span></span><br><span class="line">    <span class="attr">devtoolModuleFilenameTemplate</span>: isEnvProduction</span><br><span class="line">    ? <span class="function"><span class="params">info</span> =&gt;</span></span><br><span class="line">        path</span><br><span class="line">            .<span class="title function_">relative</span>(paths.<span class="property">appSrc</span>, info.<span class="property">absoluteResourcePath</span>)</span><br><span class="line">            .<span class="title function_">replace</span>(<span class="regexp">/\\/g</span>, <span class="string">&#x27;/&#x27;</span>)</span><br><span class="line">    : isEnvDevelopment &amp;&amp;</span><br><span class="line">        (<span class="function"><span class="params">info</span> =&gt;</span> path.<span class="title function_">resolve</span>(info.<span class="property">absoluteResourcePath</span>).<span class="title function_">replace</span>(<span class="regexp">/\\/g</span>, <span class="string">&#x27;/&#x27;</span>)),</span><br><span class="line">&#125;,</span><br></pre></td></tr></table></figure>

<h3 id="cache"><a href="#cache" class="headerlink" title="cache"></a>cache</h3><p>cache: webpack5自带的缓存，加快构建速度</p>
<figure class="highlight arduino"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line">cache: &#123;</span><br><span class="line">    <span class="comment">// 将缓存保存在文件中</span></span><br><span class="line">    type: <span class="string">&#x27;filesystem&#x27;</span>,</span><br><span class="line">    <span class="comment">// 缓存版本，版本更新将使原缓存失效</span></span><br><span class="line">    version: <span class="built_in">createEnvironmentHash</span>(env.raw),</span><br><span class="line">    <span class="comment">// 缓存的目录：node_modules/.cache</span></span><br><span class="line">    cacheDirectory: paths.appWebpackCache,</span><br><span class="line">    <span class="comment">// 当编译器空闲时将数据存储在一个文件中，用于所有缓存项</span></span><br><span class="line">    store: <span class="string">&#x27;pack&#x27;</span>,</span><br><span class="line">    <span class="comment">// 缓存的依赖，这里的变更将使缓存失效</span></span><br><span class="line">    buildDependencies: &#123;</span><br><span class="line">        defaultWebpack: [<span class="string">&#x27;webpack/lib/&#x27;</span>],</span><br><span class="line">        config: [__filename],</span><br><span class="line">        tsconfig: [paths.appTsConfig, paths.appJsConfig].<span class="built_in">filter</span>(f =&gt;</span><br><span class="line">            fs.<span class="built_in">existsSync</span>(f)</span><br><span class="line">        ),</span><br><span class="line">    &#125;,</span><br><span class="line">&#125;,</span><br></pre></td></tr></table></figure>

<h3 id="infrastructureLogging"><a href="#infrastructureLogging" class="headerlink" title="infrastructureLogging"></a>infrastructureLogging</h3><p>infrastructureLogging:基础日志级别，这里不开启，cra有自己的日志</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">infrastructureLogging: &#123;</span><br><span class="line">    level: <span class="string">&#x27;none&#x27;</span>,</span><br><span class="line">&#125;,</span><br></pre></td></tr></table></figure>

<h3 id="optimization"><a href="#optimization" class="headerlink" title="optimization"></a>optimization</h3><ul>
<li>optimization: 代码优化，比如压缩、分割等</li>
</ul>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">optimization:</span> &#123;</span><br><span class="line">    <span class="string">//</span> <span class="string">生产环境进行压缩</span></span><br><span class="line">    <span class="attr">minimize:</span> <span class="string">isEnvProduction</span>,</span><br><span class="line">    <span class="attr">minimizer:</span> [</span><br><span class="line">        <span class="string">js和css压缩...</span></span><br><span class="line">    ],</span><br><span class="line">&#125;<span class="string">,</span></span><br></pre></td></tr></table></figure>

<ul>
<li>js压缩</li>
</ul>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br></pre></td><td class="code"><pre><span class="line"><span class="string">new</span> <span class="string">TerserPlugin(&#123;</span></span><br><span class="line">    <span class="attr">terserOptions:</span> &#123;</span><br><span class="line">    <span class="attr">parse:</span> &#123;</span><br><span class="line">        <span class="string">//</span> <span class="string">以es8语法解析</span></span><br><span class="line">        <span class="attr">ecma:</span> <span class="number">8</span>,</span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="attr">compress:</span> &#123;</span><br><span class="line">        <span class="attr">ecma:</span> <span class="number">5</span>,</span><br><span class="line">        <span class="attr">warnings:</span> <span class="literal">false</span>,</span><br><span class="line">        <span class="attr">comparisons:</span> <span class="literal">false</span>,</span><br><span class="line">        <span class="attr">inline:</span> <span class="number">2</span>,</span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="attr">mangle:</span> &#123;</span><br><span class="line">        <span class="string">//</span> <span class="string">解决Safari</span> <span class="number">10</span><span class="string">中的一个bug</span></span><br><span class="line">        <span class="attr">safari10:</span> <span class="literal">true</span>,</span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="string">//</span> <span class="string">是否保留classnames</span></span><br><span class="line">    <span class="attr">keep_classnames:</span> <span class="string">isEnvProductionProfile</span>,</span><br><span class="line">    <span class="attr">keep_fnames:</span> <span class="string">isEnvProductionProfile</span>,</span><br><span class="line">    <span class="attr">output:</span> &#123;</span><br><span class="line">        <span class="attr">ecma:</span> <span class="number">5</span>,</span><br><span class="line">        <span class="attr">comments:</span> <span class="literal">false</span>,</span><br><span class="line">        <span class="attr">ascii_only:</span> <span class="literal">true</span>,</span><br><span class="line">    &#125;,</span><br><span class="line">    &#125;<span class="string">,</span></span><br><span class="line"><span class="string">&#125;),</span></span><br></pre></td></tr></table></figure>

<ul>
<li>css 压缩</li>
</ul>
<figure class="highlight scss"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">new <span class="built_in">CssMinimizerPlugin</span>(),</span><br></pre></td></tr></table></figure>

<h3 id="resolve"><a href="#resolve" class="headerlink" title="resolve"></a>resolve</h3><p>resolve:帮助找到模块的路径</p>
<ul>
<li>modules:从哪里找模块</li>
</ul>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">resolve: &#123;</span><br><span class="line">    // 这个配置主要考虑了monorepo的场景</span><br><span class="line">    modules: [<span class="string">&#x27;node_modules&#x27;</span>, paths.appNodeModules].<span class="built_in">concat</span>(</span><br><span class="line">        modules.additionalModulePaths || []</span><br><span class="line">    ),</span><br><span class="line">   ...</span><br><span class="line">&#125;,</span><br></pre></td></tr></table></figure>

<ul>
<li>extensions: 可以省略的后缀名，包含了： [ ‘web.mjs’, ‘mjs’, ‘web.js’, ‘js’, ‘web.ts’, ‘ts’, ‘web.tsx’, ‘tsx’, ‘json’, ‘web.jsx’, ‘jsx’, ];</li>
</ul>
<figure class="highlight ini"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">extensions: paths.moduleFileExtensions</span><br><span class="line">       .map(<span class="attr">ext</span> =&gt; `.<span class="variable">$&#123;ext&#125;</span>`)</span><br><span class="line">       .filter(<span class="attr">ext</span> =&gt; useTypeScript || !ext.includes(<span class="string">&#x27;ts&#x27;</span>)),</span><br><span class="line">   </span><br></pre></td></tr></table></figure>

<ul>
<li>alias:modules.webpackAliases中只有<code>src</code></li>
</ul>
<figure class="highlight csharp"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">alias</span>: &#123;</span><br><span class="line">        <span class="string">&#x27;react-native&#x27;</span>: <span class="string">&#x27;react-native-web&#x27;</span>,</span><br><span class="line">        <span class="comment">// Allows for better profiling with ReactDevTools</span></span><br><span class="line">        ...(isEnvProductionProfile &amp;&amp; &#123;</span><br><span class="line">            <span class="string">&#x27;react-dom$&#x27;</span>: <span class="string">&#x27;react-dom/profiling&#x27;</span>,</span><br><span class="line">            <span class="string">&#x27;scheduler/tracing&#x27;</span>: <span class="string">&#x27;scheduler/tracing-profiling&#x27;</span>,</span><br><span class="line">        &#125;),</span><br><span class="line">        <span class="comment">// 这里只设置了src</span></span><br><span class="line">        ...(modules.webpackAliases || &#123;&#125;),</span><br><span class="line">    &#125;,</span><br><span class="line">    </span><br></pre></td></tr></table></figure>

<ul>
<li>plugins:</li>
</ul>
<figure class="highlight arduino"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">plugins: [</span><br><span class="line">    <span class="comment">// 这个插件用来防止用户从src之外的地方导入文件</span></span><br><span class="line">        <span class="keyword">new</span> <span class="built_in">ModuleScopePlugin</span>(paths.appSrc, [</span><br><span class="line">            paths.appPackageJson,</span><br><span class="line">            reactRefreshRuntimeEntry,</span><br><span class="line">            reactRefreshWebpackPluginRuntimeEntry,</span><br><span class="line">            babelRuntimeEntry,</span><br><span class="line">            babelRuntimeEntryHelpers,</span><br><span class="line">            babelRuntimeRegenerator,</span><br><span class="line">        ]),</span><br><span class="line">    ],</span><br></pre></td></tr></table></figure>

<h3 id="module"><a href="#module" class="headerlink" title="module"></a>module</h3><p>module: 如何处理不同类型的模块</p>
<ul>
<li>strictExportPresence</li>
</ul>
<figure class="highlight arduino"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">module</span>: &#123;</span><br><span class="line">    <span class="comment">// 将缺失的导出作为error，而不是warning</span></span><br><span class="line">    strictExportPresence: <span class="literal">true</span>,</span><br><span class="line">    ...</span><br><span class="line">   </span><br><span class="line">&#125;,</span><br></pre></td></tr></table></figure>

<ul>
<li>rules: 这里用了<code>oneOf</code>api，遇到第一个匹配的就会终止，如果没有匹配的，就会执行最下面的</li>
</ul>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br><span class="line">131</span><br><span class="line">132</span><br><span class="line">133</span><br><span class="line">134</span><br><span class="line">135</span><br><span class="line">136</span><br><span class="line">137</span><br><span class="line">138</span><br><span class="line">139</span><br><span class="line">140</span><br><span class="line">141</span><br><span class="line">142</span><br><span class="line">143</span><br><span class="line">144</span><br><span class="line">145</span><br><span class="line">146</span><br><span class="line">147</span><br><span class="line">148</span><br><span class="line">149</span><br><span class="line">150</span><br><span class="line">151</span><br><span class="line">152</span><br><span class="line">153</span><br><span class="line">154</span><br><span class="line">155</span><br><span class="line">156</span><br><span class="line">157</span><br><span class="line">158</span><br><span class="line">159</span><br><span class="line">160</span><br><span class="line">161</span><br><span class="line">162</span><br><span class="line">163</span><br><span class="line">164</span><br><span class="line">165</span><br><span class="line">166</span><br><span class="line">167</span><br><span class="line">168</span><br><span class="line">169</span><br><span class="line">170</span><br><span class="line">171</span><br><span class="line">172</span><br><span class="line">173</span><br><span class="line">174</span><br><span class="line">175</span><br><span class="line">176</span><br><span class="line">177</span><br><span class="line">178</span><br><span class="line">179</span><br><span class="line">180</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">rules:</span> [</span><br><span class="line">       <span class="string">//</span> <span class="string">处理第三方库的source</span> <span class="string">map</span></span><br><span class="line">       <span class="string">shouldUseSourceMap</span> <span class="string">&amp;&amp;</span> &#123;</span><br><span class="line">           <span class="attr">enforce:</span> <span class="string">&#x27;pre&#x27;</span>,</span><br><span class="line">           <span class="attr">exclude:</span> <span class="string">/@babel(?:\/|\\</span>&#123;<span class="number">1</span>,<span class="number">2</span>&#125;<span class="string">)runtime/</span>,</span><br><span class="line">           <span class="attr">test:</span> <span class="string">/\.(js|mjs|jsx|ts|tsx|css)$/</span>,</span><br><span class="line">           <span class="attr">loader:</span> <span class="string">require.resolve(&#x27;source-map-loader&#x27;)</span>,</span><br><span class="line">       &#125;,</span><br><span class="line">       &#123;</span><br><span class="line">           <span class="string">//</span> <span class="string">&quot;oneOf&quot;</span> <span class="string">遍历下面所有的loader，直到第一个符合的，如果没有找到，则使用最下面的&#x27;file</span> <span class="string">loader&#x27;</span></span><br><span class="line">           <span class="string">//</span> <span class="string">webpack5取消了file-loader，因此这里加了个引号</span></span><br><span class="line">           <span class="attr">oneOf:</span> [</span><br><span class="line">               &#123;</span><br><span class="line">                   <span class="attr">test:</span> [<span class="string">/\.avif$/</span>],</span><br><span class="line">                   <span class="attr">type:</span> <span class="string">&#x27;asset&#x27;</span>,</span><br><span class="line">                   <span class="attr">mimetype:</span> <span class="string">&#x27;image/avif&#x27;</span>,</span><br><span class="line">                   <span class="string">//</span> <span class="string">这个是webpack5的配置，取消raw-loader、url-loader、file-loader</span></span><br><span class="line">                   <span class="attr">parser:</span> &#123;</span><br><span class="line">                       <span class="attr">dataUrlCondition:</span> &#123;</span><br><span class="line">                           <span class="attr">maxSize:</span> <span class="string">imageInlineSizeLimit</span>,</span><br><span class="line">                       &#125;,</span><br><span class="line">                   &#125;,</span><br><span class="line">               &#125;,</span><br><span class="line">               &#123;</span><br><span class="line">                   <span class="attr">test:</span> [<span class="string">/\.bmp$/</span>, <span class="string">/\.gif$/</span>, <span class="string">/\.jpe?g$/</span>, <span class="string">/\.png$/</span>],</span><br><span class="line">                   <span class="attr">type:</span> <span class="string">&#x27;asset&#x27;</span>,</span><br><span class="line">                   <span class="attr">parser:</span> &#123;</span><br><span class="line">                   <span class="attr">dataUrlCondition:</span> &#123;</span><br><span class="line">                       <span class="attr">maxSize:</span> <span class="string">imageInlineSizeLimit</span>,</span><br><span class="line">                   &#125;,</span><br><span class="line">                   &#125;,</span><br><span class="line">               &#125;,</span><br><span class="line">               &#123;</span><br><span class="line">                   <span class="attr">test:</span> <span class="string">/\.svg$/</span>,</span><br><span class="line">                   <span class="attr">use:</span> [</span><br><span class="line">                       &#123;</span><br><span class="line">                           <span class="string">//可以将svg以组件的形式导入</span> <span class="string">import</span> <span class="string">Star</span> <span class="string">from</span> <span class="string">&#x27;./star.svg&#x27;</span></span><br><span class="line">                           <span class="attr">loader:</span> <span class="string">require.resolve(&#x27;@svgr/webpack&#x27;)</span>,</span><br><span class="line">                           <span class="attr">options:</span> &#123;</span><br><span class="line">                               <span class="attr">prettier:</span> <span class="literal">false</span>,</span><br><span class="line">                               <span class="attr">svgo:</span> <span class="literal">false</span>,</span><br><span class="line">                               <span class="attr">svgoConfig:</span> &#123;</span><br><span class="line">                                   <span class="attr">plugins:</span> [&#123; <span class="attr">removeViewBox:</span> <span class="literal">false</span> &#125;],</span><br><span class="line">                               &#125;,</span><br><span class="line">                               <span class="attr">titleProp:</span> <span class="literal">true</span>,</span><br><span class="line">                               <span class="attr">ref:</span> <span class="literal">true</span>,</span><br><span class="line">                           &#125;,</span><br><span class="line">                       &#125;,</span><br><span class="line">                       &#123;</span><br><span class="line">                           <span class="attr">loader:</span> <span class="string">require.resolve(&#x27;file-loader&#x27;)</span>,</span><br><span class="line">                           <span class="attr">options:</span> &#123;</span><br><span class="line">                           <span class="attr">name:</span> <span class="string">&#x27;static/media/[name].[hash].[ext]&#x27;</span>,</span><br><span class="line">                           &#125;,</span><br><span class="line">                       &#125;,</span><br><span class="line">                   ],</span><br><span class="line">                   <span class="string">//</span> <span class="string">在这些条件中生效</span></span><br><span class="line">                   <span class="attr">issuer:</span> &#123;</span><br><span class="line">                   <span class="attr">and:</span> [<span class="string">/\.(ts|tsx|js|jsx|md|mdx)$/</span>],</span><br><span class="line">                   &#125;,</span><br><span class="line">               &#125;,</span><br><span class="line">               &#123;</span><br><span class="line">                   <span class="attr">test:</span> <span class="string">/\.(js|mjs|jsx|ts|tsx)$/</span>,</span><br><span class="line">                   <span class="attr">include:</span> <span class="string">paths.appSrc</span>,</span><br><span class="line">                   <span class="attr">loader:</span> <span class="string">require.resolve(&#x27;babel-loader&#x27;)</span>,</span><br><span class="line">                   <span class="attr">options:</span> &#123;</span><br><span class="line">                       <span class="string">//</span> <span class="string">babel-preset-react-app是cra自定义的preset</span>,<span class="string">包括了</span> <span class="string">JSX</span>, <span class="string">Flow</span>, <span class="string">TypeScript</span>, <span class="string">and</span> <span class="string">some</span> <span class="string">ESnext</span> <span class="string">features</span></span><br><span class="line">                       <span class="attr">customize:</span> <span class="string">require.resolve(</span></span><br><span class="line">                           <span class="string">&#x27;babel-preset-react-app/webpack-overrides&#x27;</span></span><br><span class="line">                       <span class="string">)</span>,</span><br><span class="line">                       <span class="attr">presets:</span> [</span><br><span class="line">                           [</span><br><span class="line">                           <span class="string">require.resolve(&#x27;babel-preset-react-app&#x27;)</span>,</span><br><span class="line">                           &#123;</span><br><span class="line">                               <span class="attr">runtime:</span> <span class="string">hasJsxRuntime</span> <span class="string">?</span> <span class="string">&#x27;automatic&#x27;</span> <span class="string">:</span> <span class="string">&#x27;classic&#x27;</span>,</span><br><span class="line">                           &#125;,</span><br><span class="line">                           ],</span><br><span class="line">                       ],</span><br><span class="line">                       <span class="string">//</span> <span class="string">一下两个eject后会移除</span></span><br><span class="line">                       <span class="attr">babelrc:</span> <span class="literal">false</span>,</span><br><span class="line">                       <span class="attr">configFile:</span> <span class="literal">false</span>,</span><br><span class="line">                       <span class="string">//</span> <span class="string">确保</span> <span class="string">cache</span> <span class="string">identifier的唯一性，eject后会移除</span></span><br><span class="line">                       <span class="attr">cacheIdentifier:</span> <span class="string">getCacheIdentifier(</span></span><br><span class="line">                           <span class="string">isEnvProduction</span></span><br><span class="line">                           <span class="string">?</span> <span class="string">&#x27;production&#x27;</span></span><br><span class="line">                           <span class="string">:</span> <span class="string">isEnvDevelopment</span> <span class="string">&amp;&amp;</span> <span class="string">&#x27;development&#x27;</span>,</span><br><span class="line">                           [</span><br><span class="line">                           <span class="string">&#x27;babel-plugin-named-asset-import&#x27;</span>,</span><br><span class="line">                           <span class="string">&#x27;babel-preset-react-app&#x27;</span>,</span><br><span class="line">                           <span class="string">&#x27;react-dev-utils&#x27;</span>,</span><br><span class="line">                           <span class="string">&#x27;react-scripts&#x27;</span>,</span><br><span class="line">                           ]</span><br><span class="line">                       <span class="string">)</span>,</span><br><span class="line">                       <span class="attr">plugins:</span> [</span><br><span class="line">                           <span class="string">isEnvDevelopment</span> <span class="string">&amp;&amp;</span></span><br><span class="line">                           <span class="string">shouldUseReactRefresh</span> <span class="string">&amp;&amp;</span></span><br><span class="line">                           <span class="string">require.resolve(&#x27;react-refresh/babel&#x27;)</span>,</span><br><span class="line">                       ]<span class="string">.filter(Boolean)</span>,</span><br><span class="line">                       <span class="string">//</span> <span class="string">babel-loader能将缓存保存在./node_modules/.cache/babel-loader/</span></span><br><span class="line">                       <span class="attr">cacheDirectory:</span> <span class="literal">true</span>,</span><br><span class="line">                       <span class="attr">cacheCompression:</span> <span class="literal">false</span>,</span><br><span class="line">                       <span class="attr">compact:</span> <span class="string">isEnvProduction</span>,</span><br><span class="line">                   &#125;,</span><br><span class="line">               &#125;,</span><br><span class="line">               <span class="string">//</span> <span class="string">处理其他js</span></span><br><span class="line">               &#123;</span><br><span class="line">                   <span class="attr">test:</span> <span class="string">/\.(js|mjs)$/</span>,</span><br><span class="line">                   <span class="attr">exclude:</span> <span class="string">/@babel(?:\/|\\</span>&#123;<span class="number">1</span>,<span class="number">2</span>&#125;<span class="string">)runtime/</span>,</span><br><span class="line">                   <span class="attr">loader:</span> <span class="string">require.resolve(&#x27;babel-loader&#x27;)</span>,</span><br><span class="line">                   <span class="attr">options:</span> &#123;</span><br><span class="line">                       <span class="string">...</span> <span class="string">同上</span></span><br><span class="line">                   &#125;,</span><br><span class="line">               &#125;,</span><br><span class="line">               &#123;</span><br><span class="line">                   <span class="attr">test:</span> <span class="string">cssRegex</span>,</span><br><span class="line">                   <span class="attr">exclude:</span> <span class="string">cssModuleRegex</span>,</span><br><span class="line">                   <span class="attr">use:</span> <span class="string">getStyleLoaders(</span>&#123;</span><br><span class="line">                   <span class="attr">importLoaders:</span> <span class="number">1</span>,</span><br><span class="line">                   <span class="attr">sourceMap:</span> <span class="string">isEnvProduction</span></span><br><span class="line">                       <span class="string">?</span> <span class="string">shouldUseSourceMap</span></span><br><span class="line">                       <span class="string">:</span> <span class="string">isEnvDevelopment</span>,</span><br><span class="line">                   <span class="attr">modules:</span> &#123;</span><br><span class="line">                       <span class="attr">mode:</span> <span class="string">&#x27;icss&#x27;</span>,</span><br><span class="line">                   &#125;,</span><br><span class="line">                   &#125;<span class="string">)</span>,</span><br><span class="line">                   <span class="attr">sideEffects:</span> <span class="literal">true</span>,</span><br><span class="line">               &#125;,</span><br><span class="line">               &#123;</span><br><span class="line">                   <span class="attr">test:</span> <span class="string">cssModuleRegex</span>,</span><br><span class="line">                   <span class="attr">use:</span> <span class="string">getStyleLoaders(</span>&#123;</span><br><span class="line">                   <span class="attr">importLoaders:</span> <span class="number">1</span>,</span><br><span class="line">                   <span class="attr">sourceMap:</span> <span class="string">isEnvProduction</span></span><br><span class="line">                       <span class="string">?</span> <span class="string">shouldUseSourceMap</span></span><br><span class="line">                       <span class="string">:</span> <span class="string">isEnvDevelopment</span>,</span><br><span class="line">                   <span class="attr">modules:</span> &#123;</span><br><span class="line">                       <span class="attr">mode:</span> <span class="string">&#x27;local&#x27;</span>,</span><br><span class="line">                       <span class="attr">getLocalIdent:</span> <span class="string">getCSSModuleLocalIdent</span>,</span><br><span class="line">                   &#125;,</span><br><span class="line">                   &#125;<span class="string">)</span>,</span><br><span class="line">               &#125;,</span><br><span class="line">               &#123;</span><br><span class="line">                   <span class="attr">test:</span> <span class="string">sassRegex</span>,</span><br><span class="line">                   <span class="attr">exclude:</span> <span class="string">sassModuleRegex</span>,</span><br><span class="line">                   <span class="attr">use:</span> <span class="string">getStyleLoaders(</span></span><br><span class="line">                   &#123;</span><br><span class="line">                       <span class="attr">importLoaders:</span> <span class="number">3</span>,</span><br><span class="line">                       <span class="attr">sourceMap:</span> <span class="string">isEnvProduction</span></span><br><span class="line">                       <span class="string">?</span> <span class="string">shouldUseSourceMap</span></span><br><span class="line">                       <span class="string">:</span> <span class="string">isEnvDevelopment</span>,</span><br><span class="line">                       <span class="attr">modules:</span> &#123;</span><br><span class="line">                       <span class="attr">mode:</span> <span class="string">&#x27;icss&#x27;</span>,</span><br><span class="line">                       &#125;,</span><br><span class="line">                   &#125;,</span><br><span class="line">                   <span class="string">&#x27;sass-loader&#x27;</span></span><br><span class="line">                   <span class="string">)</span>,</span><br><span class="line">                   <span class="attr">sideEffects:</span> <span class="literal">true</span>,</span><br><span class="line">               &#125;,</span><br><span class="line">               &#123;</span><br><span class="line">                   <span class="attr">test:</span> <span class="string">sassModuleRegex</span>,</span><br><span class="line">                   <span class="attr">use:</span> <span class="string">getStyleLoaders(</span></span><br><span class="line">                   &#123;</span><br><span class="line">                       <span class="attr">importLoaders:</span> <span class="number">3</span>,</span><br><span class="line">                       <span class="attr">sourceMap:</span> <span class="string">isEnvProduction</span></span><br><span class="line">                       <span class="string">?</span> <span class="string">shouldUseSourceMap</span></span><br><span class="line">                       <span class="string">:</span> <span class="string">isEnvDevelopment</span>,</span><br><span class="line">                       <span class="attr">modules:</span> &#123;</span><br><span class="line">                       <span class="attr">mode:</span> <span class="string">&#x27;local&#x27;</span>,</span><br><span class="line">                       <span class="attr">getLocalIdent:</span> <span class="string">getCSSModuleLocalIdent</span>,</span><br><span class="line">                       &#125;,</span><br><span class="line">                   &#125;,</span><br><span class="line">                   <span class="string">&#x27;sass-loader&#x27;</span></span><br><span class="line">                   <span class="string">)</span>,</span><br><span class="line">               &#125;,</span><br><span class="line">               <span class="string">//</span> <span class="string">兜底的&#x27;file</span> <span class="string">loader&#x27;</span></span><br><span class="line">               &#123;</span><br><span class="line">                   <span class="attr">exclude:</span> [<span class="string">/^$/</span>, <span class="string">/\.(js|mjs|jsx|ts|tsx)$/</span>, <span class="string">/\.html$/</span>, <span class="string">/\.json$/</span>],</span><br><span class="line">                   <span class="attr">type:</span> <span class="string">&#x27;asset/resource&#x27;</span>,</span><br><span class="line">               &#125;,</span><br><span class="line">           ],</span><br><span class="line">       &#125;,</span><br><span class="line">   ]<span class="string">.filter(Boolean),</span></span><br></pre></td></tr></table></figure>

<h3 id="plugins"><a href="#plugins" class="headerlink" title="plugins:"></a>plugins:</h3><p>plugins:各种插件，作用见注释</p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br><span class="line">131</span><br><span class="line">132</span><br><span class="line">133</span><br><span class="line">134</span><br><span class="line">135</span><br><span class="line">136</span><br><span class="line">137</span><br><span class="line">138</span><br><span class="line">139</span><br><span class="line">140</span><br><span class="line">141</span><br><span class="line">142</span><br><span class="line">143</span><br><span class="line">144</span><br><span class="line">145</span><br><span class="line">146</span><br><span class="line">147</span><br><span class="line">148</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">plugins:</span> [</span><br><span class="line">    <span class="string">new</span> <span class="string">HtmlWebpackPlugin(</span></span><br><span class="line">    <span class="string">Object.assign(</span></span><br><span class="line">        &#123;&#125;,</span><br><span class="line">        &#123;</span><br><span class="line">        <span class="attr">inject:</span> <span class="literal">true</span>,</span><br><span class="line">        <span class="attr">template:</span> <span class="string">paths.appHtml</span>,</span><br><span class="line">        &#125;,</span><br><span class="line">        <span class="string">isEnvProduction</span></span><br><span class="line">        <span class="string">?</span> &#123;</span><br><span class="line">            <span class="attr">minify:</span> &#123;</span><br><span class="line">                <span class="attr">removeComments:</span> <span class="literal">true</span>,</span><br><span class="line">                <span class="attr">collapseWhitespace:</span> <span class="literal">true</span>,</span><br><span class="line">                <span class="attr">removeRedundantAttributes:</span> <span class="literal">true</span>,</span><br><span class="line">                <span class="attr">useShortDoctype:</span> <span class="literal">true</span>,</span><br><span class="line">                <span class="attr">removeEmptyAttributes:</span> <span class="literal">true</span>,</span><br><span class="line">                <span class="attr">removeStyleLinkTypeAttributes:</span> <span class="literal">true</span>,</span><br><span class="line">                <span class="attr">keepClosingSlash:</span> <span class="literal">true</span>,</span><br><span class="line">                <span class="attr">minifyJS:</span> <span class="literal">true</span>,</span><br><span class="line">                <span class="attr">minifyCSS:</span> <span class="literal">true</span>,</span><br><span class="line">                <span class="attr">minifyURLs:</span> <span class="literal">true</span>,</span><br><span class="line">            &#125;,</span><br><span class="line">            &#125;</span><br><span class="line">        <span class="string">:</span> <span class="string">undefined</span></span><br><span class="line">    <span class="string">)</span></span><br><span class="line">    <span class="string">)</span>,</span><br><span class="line">    <span class="string">isEnvProduction</span> <span class="string">&amp;&amp;</span></span><br><span class="line">    <span class="string">shouldInlineRuntimeChunk</span> <span class="string">&amp;&amp;</span></span><br><span class="line">    <span class="string">new</span> <span class="string">InlineChunkHtmlPlugin(HtmlWebpackPlugin</span>, [<span class="string">/runtime-.+</span>[<span class="string">.</span>]<span class="string">js/</span>]<span class="string">)</span>,</span><br><span class="line">    <span class="string">//</span> <span class="string">指定index.html中可以使用的变量，如&lt;link</span> <span class="string">rel=&quot;icon&quot;</span> <span class="string">href=&quot;%PUBLIC_URL%/favicon.ico&quot;&gt;</span></span><br><span class="line">    <span class="string">new</span> <span class="string">InterpolateHtmlPlugin(HtmlWebpackPlugin</span>, <span class="string">env.raw)</span>,</span><br><span class="line">    <span class="string">new</span> <span class="string">ModuleNotFoundPlugin(paths.appPath)</span>,</span><br><span class="line">    <span class="string">new</span> <span class="string">webpack.DefinePlugin(env.stringified)</span>,</span><br><span class="line">    <span class="string">isEnvDevelopment</span> <span class="string">&amp;&amp;</span></span><br><span class="line">    <span class="string">shouldUseReactRefresh</span> <span class="string">&amp;&amp;</span></span><br><span class="line">    <span class="string">new</span> <span class="string">ReactRefreshWebpackPlugin(</span>&#123;</span><br><span class="line">        <span class="attr">overlay:</span> <span class="literal">false</span>,</span><br><span class="line">    &#125;<span class="string">)</span>,</span><br><span class="line">    <span class="string">//</span> <span class="string">大小写敏感，这个插件挺有用的</span></span><br><span class="line">    <span class="string">isEnvDevelopment</span> <span class="string">&amp;&amp;</span> <span class="string">new</span> <span class="string">CaseSensitivePathsPlugin()</span>,</span><br><span class="line">    <span class="string">isEnvProduction</span> <span class="string">&amp;&amp;</span></span><br><span class="line">    <span class="string">new</span> <span class="string">MiniCssExtractPlugin(</span>&#123;</span><br><span class="line">        <span class="attr">filename:</span> <span class="string">&#x27;static/css/[name].[contenthash:8].css&#x27;</span>,</span><br><span class="line">        <span class="attr">chunkFilename:</span> <span class="string">&#x27;static/css/[name].[contenthash:8].chunk.css&#x27;</span>,</span><br><span class="line">    &#125;<span class="string">)</span>,</span><br><span class="line"> </span><br><span class="line">    <span class="string">new</span> <span class="string">WebpackManifestPlugin(</span>&#123;</span><br><span class="line">        <span class="attr">fileName:</span> <span class="string">&#x27;asset-manifest.json&#x27;</span>,</span><br><span class="line">        <span class="attr">publicPath:</span> <span class="string">paths.publicUrlOrPath</span>,</span><br><span class="line">        <span class="attr">generate:</span> <span class="string">(seed</span>, <span class="string">files</span>, <span class="string">entrypoints)</span> <span class="string">=&gt;</span> &#123;</span><br><span class="line">            <span class="string">const</span> <span class="string">manifestFiles</span> <span class="string">=</span> <span class="string">files.reduce((manifest</span>, <span class="string">file)</span> <span class="string">=&gt;</span> &#123;</span><br><span class="line">            <span class="string">manifest</span>[<span class="string">file.name</span>] <span class="string">=</span> <span class="string">file.path;</span></span><br><span class="line">            <span class="string">return</span> <span class="string">manifest;</span></span><br><span class="line">            &#125;, <span class="string">seed);</span></span><br><span class="line">            <span class="string">const</span> <span class="string">entrypointFiles</span> <span class="string">=</span> <span class="string">entrypoints.main.filter(</span></span><br><span class="line">            <span class="string">fileName</span> <span class="string">=&gt;</span> <span class="type">!fileName.endsWith(&#x27;.map&#x27;)</span></span><br><span class="line">            <span class="string">);</span></span><br><span class="line"></span><br><span class="line">            <span class="string">return</span> &#123;</span><br><span class="line">            <span class="attr">files:</span> <span class="string">manifestFiles</span>,</span><br><span class="line">            <span class="attr">entrypoints:</span> <span class="string">entrypointFiles</span>,</span><br><span class="line">            &#125;<span class="string">;</span></span><br><span class="line">        &#125;,</span><br><span class="line">    &#125;<span class="string">)</span>,</span><br><span class="line">    <span class="string">//</span> <span class="string">不打包momentjs中的语言包</span></span><br><span class="line">    <span class="string">new</span> <span class="string">webpack.IgnorePlugin(</span>&#123;</span><br><span class="line">        <span class="attr">resourceRegExp:</span> <span class="string">/^\.\/locale$/</span>,</span><br><span class="line">        <span class="attr">contextRegExp:</span> <span class="string">/moment$/</span>,</span><br><span class="line">    &#125;<span class="string">)</span>,</span><br><span class="line">    <span class="string">//</span> <span class="string">service</span> <span class="string">worker</span></span><br><span class="line">    <span class="string">isEnvProduction</span> <span class="string">&amp;&amp;</span></span><br><span class="line">    <span class="string">fs.existsSync(swSrc)</span> <span class="string">&amp;&amp;</span></span><br><span class="line">    <span class="string">new</span> <span class="string">WorkboxWebpackPlugin.InjectManifest(</span>&#123;</span><br><span class="line">        <span class="string">swSrc</span>,</span><br><span class="line">        <span class="attr">dontCacheBustURLsMatching:</span> <span class="string">/\.</span>[<span class="number">0</span><span class="string">-9a-f</span>]&#123;<span class="number">8</span>&#125;<span class="string">\./</span>,</span><br><span class="line">        <span class="attr">exclude:</span> [<span class="string">/\.map$/</span>, <span class="string">/asset-manifest\.json$/</span>, <span class="string">/LICENSE/</span>],</span><br><span class="line">        <span class="attr">maximumFileSizeToCacheInBytes:</span> <span class="number">5</span> <span class="string">*</span> <span class="number">1024</span> <span class="string">*</span> <span class="number">1024</span>,</span><br><span class="line">    &#125;<span class="string">)</span>,</span><br><span class="line">    <span class="string">//</span> <span class="string">改动ts文件触发类型检查</span></span><br><span class="line">    <span class="string">useTypeScript</span> <span class="string">&amp;&amp;</span></span><br><span class="line">    <span class="string">new</span> <span class="string">ForkTsCheckerWebpackPlugin(</span>&#123;</span><br><span class="line">        <span class="attr">async:</span> <span class="string">isEnvDevelopment</span>,</span><br><span class="line">        <span class="attr">typescript:</span> &#123;</span><br><span class="line">            <span class="attr">typescriptPath:</span> <span class="string">resolve.sync(&#x27;typescript&#x27;</span>, &#123;</span><br><span class="line">                <span class="attr">basedir:</span> <span class="string">paths.appNodeModules</span>,</span><br><span class="line">            &#125;<span class="string">)</span>,</span><br><span class="line">            <span class="attr">configOverwrite:</span> &#123;</span><br><span class="line">                <span class="attr">compilerOptions:</span> &#123;</span><br><span class="line">                <span class="attr">sourceMap:</span> <span class="string">isEnvProduction</span></span><br><span class="line">                    <span class="string">?</span> <span class="string">shouldUseSourceMap</span></span><br><span class="line">                    <span class="string">:</span> <span class="string">isEnvDevelopment</span>,</span><br><span class="line">                <span class="attr">skipLibCheck:</span> <span class="literal">true</span>,</span><br><span class="line">                <span class="attr">inlineSourceMap:</span> <span class="literal">false</span>,</span><br><span class="line">                <span class="attr">declarationMap:</span> <span class="literal">false</span>,</span><br><span class="line">                <span class="attr">noEmit:</span> <span class="literal">true</span>,</span><br><span class="line">                <span class="attr">incremental:</span> <span class="literal">true</span>,</span><br><span class="line">                <span class="attr">tsBuildInfoFile:</span> <span class="string">paths.appTsBuildInfoFile</span>,</span><br><span class="line">                &#125;,</span><br><span class="line">            &#125;,</span><br><span class="line">            <span class="attr">context:</span> <span class="string">paths.appPath</span>,</span><br><span class="line">            <span class="attr">diagnosticOptions:</span> &#123;</span><br><span class="line">                <span class="attr">syntactic:</span> <span class="literal">true</span>,</span><br><span class="line">            &#125;,</span><br><span class="line">            <span class="attr">mode:</span> <span class="string">&#x27;write-references&#x27;</span>,</span><br><span class="line">        &#125;,</span><br><span class="line">        <span class="attr">issue:</span> &#123;</span><br><span class="line">            <span class="attr">include:</span> [</span><br><span class="line">                &#123; <span class="attr">file:</span> <span class="string">&#x27;../**/src/**/*.&#123;ts,tsx&#125;&#x27;</span> &#125;,</span><br><span class="line">                &#123; <span class="attr">file:</span> <span class="string">&#x27;**/src/**/*.&#123;ts,tsx&#125;&#x27;</span> &#125;,</span><br><span class="line">            ],</span><br><span class="line">            <span class="attr">exclude:</span> [</span><br><span class="line">                &#123; <span class="attr">file:</span> <span class="string">&#x27;**/src/**/__tests__/**&#x27;</span> &#125;,</span><br><span class="line">                &#123; <span class="attr">file:</span> <span class="string">&#x27;**/src/**/?(*.)&#123;spec|test&#125;.*&#x27;</span> &#125;,</span><br><span class="line">                &#123; <span class="attr">file:</span> <span class="string">&#x27;**/src/setupProxy.*&#x27;</span> &#125;,</span><br><span class="line">                &#123; <span class="attr">file:</span> <span class="string">&#x27;**/src/setupTests.*&#x27;</span> &#125;,</span><br><span class="line">            ],</span><br><span class="line">        &#125;,</span><br><span class="line">        <span class="attr">logger:</span> &#123;</span><br><span class="line">            <span class="attr">infrastructure:</span> <span class="string">&#x27;silent&#x27;</span>,</span><br><span class="line">        &#125;,</span><br><span class="line">    &#125;<span class="string">)</span>,</span><br><span class="line">    <span class="type">!disableESLintPlugin</span> <span class="string">&amp;&amp;</span></span><br><span class="line">    <span class="string">new</span> <span class="string">ESLintPlugin(</span>&#123;</span><br><span class="line">        <span class="attr">extensions:</span> [<span class="string">&#x27;js&#x27;</span>, <span class="string">&#x27;mjs&#x27;</span>, <span class="string">&#x27;jsx&#x27;</span>, <span class="string">&#x27;ts&#x27;</span>, <span class="string">&#x27;tsx&#x27;</span>],</span><br><span class="line">        <span class="attr">formatter:</span> <span class="string">require.resolve(&#x27;react-dev-utils/eslintFormatter&#x27;)</span>,</span><br><span class="line">        <span class="attr">eslintPath:</span> <span class="string">require.resolve(&#x27;eslint&#x27;)</span>,</span><br><span class="line">        <span class="attr">failOnError:</span> <span class="type">!(isEnvDevelopment</span> <span class="string">&amp;&amp;</span> <span class="string">emitErrorsAsWarnings)</span>,</span><br><span class="line">        <span class="attr">context:</span> <span class="string">paths.appSrc</span>,</span><br><span class="line">        <span class="attr">cache:</span> <span class="literal">true</span>,</span><br><span class="line">        <span class="attr">cacheLocation:</span> <span class="string">path.resolve(</span></span><br><span class="line">            <span class="string">paths.appNodeModules</span>,</span><br><span class="line">            <span class="string">&#x27;.cache/.eslintcache&#x27;</span></span><br><span class="line">        <span class="string">)</span>,</span><br><span class="line">        <span class="string">//</span> <span class="string">ESLint</span> <span class="string">class</span> <span class="string">options</span></span><br><span class="line">        <span class="attr">cwd:</span> <span class="string">paths.appPath</span>,</span><br><span class="line">        <span class="attr">resolvePluginsRelativeTo:</span> <span class="string">__dirname</span>,</span><br><span class="line">        <span class="attr">baseConfig:</span> &#123;</span><br><span class="line">        <span class="attr">extends:</span> [<span class="string">require.resolve(&#x27;eslint-config-react-app/base&#x27;)</span>],</span><br><span class="line">        <span class="attr">rules:</span> &#123;</span><br><span class="line">            <span class="string">...(!hasJsxRuntime</span> <span class="string">&amp;&amp;</span> &#123;</span><br><span class="line">            <span class="attr">&#x27;react/react-in-jsx-scope&#x27;:</span> <span class="string">&#x27;error&#x27;</span>,</span><br><span class="line">            &#125;<span class="string">)</span>,</span><br><span class="line">        &#125;,</span><br><span class="line">        &#125;,</span><br><span class="line">    &#125;<span class="string">)</span>,</span><br><span class="line">]<span class="string">.filter(Boolean),</span></span><br><span class="line"></span><br><span class="line"><span class="string">&#125;;</span></span><br></pre></td></tr></table></figure>

<h3 id="performance"><a href="#performance" class="headerlink" title="performance"></a>performance</h3><p>performance:CRA自带了FileSizeReporter</p>
<figure class="highlight vbnet"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="symbol">performance:</span> <span class="literal">false</span>,</span><br></pre></td></tr></table></figure>

<h2 id="eject命令"><a href="#eject命令" class="headerlink" title="eject命令"></a>eject命令</h2><p>eject命令并不复杂，主要也就是是将react-scripts中的文件输出出去，对于eject后不需要的内容，文件中都已经做了标记：</p>
<figure class="highlight sql"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="operator">/</span><span class="operator">/</span> <span class="variable">@remove</span><span class="operator">-</span><span class="keyword">on</span><span class="operator">-</span>eject<span class="operator">-</span><span class="keyword">end</span></span><br><span class="line">...</span><br><span class="line"><span class="operator">/</span><span class="operator">/</span> <span class="variable">@remove</span><span class="operator">-</span><span class="keyword">on</span><span class="operator">-</span>eject<span class="operator">-</span><span class="keyword">begin</span></span><br></pre></td></tr></table></figure>

<p>eject过程成中会用正则将这些标记的代码给删除，另外再删除掉react-scripts包，并修改package.json中的几个命令，如<code>&quot;start&quot;: &quot;node scripts/start.js&quot;,</code></p>
<h2 id="结尾"><a href="#结尾" class="headerlink" title="结尾"></a>结尾</h2><p>Create React App的源码解析就到这里，后续的文章将会介绍如何自己设计和搭建一个CLI,并不断将其改造完善成一个企业级的脚手架。</p>

        
      </div>

         
    </div>
    
     
  </div>
  
    
<nav id="article-nav">
  <a class="article-nav-btn left "
    
      href="/hexo-blog/2021/11/16/%E6%8A%9B%E5%BC%80State%E5%92%8CContext%E8%B0%88%E5%89%8D%E7%AB%AF%E7%BB%84%E4%BB%B6%E9%80%9A%E4%BF%A1(%E4%B8%80)%E2%80%94%E2%80%94%E5%AE%9E%E4%BE%8B%E5%8A%AB%E6%8C%81+%E4%B8%AD%E4%BB%8B%E8%80%85%E9%80%9A%E4%BF%A1/"
      title="抛开State和Context谈前端组件通信(一)——实例劫持+中介者通信"
     >
    <i class="fa-solid fa-angle-left"></i>
    <p class="title-text">
      
        抛开State和Context谈前端组件通信(一)——实例劫持+中介者通信
        
    </p>
  </a>
  <a class="article-nav-btn right "
    
      href="/hexo-blog/2021/11/14/React%20library%20%E5%BF%AB%E9%80%9F%E5%85%A5%E9%97%A8%E2%80%94%E2%80%94Recoil/"
      title="React library 快速入门——Recoil"
     >

    <p class="title-text">
      
        React library 快速入门——Recoil
        
    </p>
    <i class="fa-solid fa-angle-right"></i>
  </a>
</nav>


  
</article>





    </div>
    <div id="footer-wrapper">
      <footer id="footer">
  
  <div id="footer-info" class="inner">
    
    &copy; 2024 Zachary<br>
    <!-- Powered by <a href="https://hexo.io/" target="_blank">Hexo</a> & Theme <a target="_blank" rel="noopener" href="https://github.com/saicaca/hexo-theme-vivia">Vivia</a> -->
      <a target="_blank" rel="noopener" href="https://beian.miit.gov.cn">苏ICP备20030005号-2</a>
  </div>
</footer>

    </div>
    <div class="back-to-top-wrapper">
    <button id="back-to-top-btn" class="back-to-top-btn hide" onclick="topFunction()">
        <i class="fa-solid fa-angle-up"></i>
    </button>
</div>

<script>
    function topFunction() {
        window.scroll({ top: 0, behavior: 'smooth' });
    }
    let btn = document.getElementById('back-to-top-btn');
    function scrollFunction() {
        if (document.body.scrollTop > 600 || document.documentElement.scrollTop > 600) {
            btn.classList.remove('hide')
        } else {
            btn.classList.add('hide')
        }
    }
    window.onscroll = function() {
        scrollFunction();
    }
</script>

  </div>
  <script src="/hexo-blog/js/light-dark-switch.js"></script>
</body>
</html>
